<template>
  <a-collapse default-active-key="1">
    <a-collapse-panel key="1" :header="t('私有配置')">
      <component :is="currentComponent?.component"></component>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, markRaw, ref } from 'vue';
import { currentShape } from '../../../data/shapes';
import { getFileName } from '../../../utils/shape.create';

const { t } = useI18n();

// 批量导入组件,必须以类型+config命名
const components = import.meta.glob('./**.vue');
const componentList = ref([] as Array<any>);
// eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries(components)) {
  componentList.value.push({
    type: getFileName(key).toLowerCase().replace('config', ''),
    component: markRaw(defineAsyncComponent(value as any)),
  });
}
const currentComponent = computed(() => {
  return componentList.value.find((com: any) => {
    if (currentShape.value.type.replace('d-', '') === com.type) {
      return com;
    }
    return null;
  });
});
</script>

<style lang="scss" scoped></style>
